<template>
  <div class="starry-background">
    <div v-for="n in 200" :key="n" class="star"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const stars = document.querySelectorAll('.star')
  stars.forEach(star => {
    // 随机位置
    star.style.left = `${Math.random() * 100}%`
    star.style.top = `${Math.random() * 100}%`
    // 随机大小
    const size = Math.random() * 3
    star.style.width = `${size}px`
    star.style.height = `${size}px`
    // 随机动画延迟
    star.style.animationDelay = `${Math.random() * 3}s`
  })
})
</script>

<style scoped>
.starry-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(125deg, #000428, #004e92);
  z-index: 0;
}

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
</style> 